import React, { Component } from 'react';
import { Stepper,Rate } from 'antd-mobile'
import { CheckCircleTwoTone } from '@ant-design/icons';
import './FoodsDetail.scss'
import dateFormat from 'dateformat'
class FoodsDetail extends Component {
    constructor(props) {
        super(props);

        this.state = { 
            selectType:-1,
            onlyContent:false,
        }
    }
    
    componentDidMount(){
        
    }

    filterRatings(){
        let filterRatings = this.props.goodsData.ratings
        if(filterRatings){

            if(this.state.selectType != -1){
                filterRatings = filterRatings.filter(el=>el.rateType == this.state.selectType)
            }
            if(this.state.onlyContent){
                filterRatings = filterRatings.filter(el=>el.text)
            }
            return filterRatings
        }else{
            return []
        }
    }
    //只显示有内容的评价
    onlyShowContent = (e)=>{

        this.setState({
            onlyContent:!this.state.onlyContent
        })
    }

    changeType(type){
        this.setState({
            selectType:type
        })
    }

    render() { 
        return (
            <div className="FoodsDetail">
                {/* <button onClick={()=>{console.info(this.props)}}>设置1</button>
                <button onClick={()=>{this.props.setStoreIndexState('viewNowGoodsID','0,1')}}>设置1</button>
                <button onClick={()=>{this.props.setStoreIndexState('viewNowGoodsID','0,2')}}>设置2</button>
                <button onClick={()=>{this.props.setStoreIndexState('viewNowGoodsID','0,3')}}>设置3</button> */}
                <img className="img" src={this.props.goodsData.image}></img>
                <div className="info">
                    <div className="name">{this.props.goodsData.name}</div>
                    <div className="rate">
                        <span>月售{this.props.goodsData.sellCount}份</span>
                        <span className="mgl24">好评率{this.props.goodsData.rating}%</span>
                    </div>
                    <div className="command">
                        <div className="price">
                            <span className="now-price">￥{this.props.goodsData.price}</span>
                            <span className="last-price mgl24">￥123{this.props.goodsData.oldPrice}</span>
                        </div>
                        <div className="shop-carts">
                            {
                                this.props.goodsData.count == 0 ?
                                <div 
                                    className="add-btn"
                                    onClick={()=>{this.props.setCount(this.props.goodsData.listIndex,this.props.goodsData.foodsIndex,1)}}
                                    >加入购物车</div>:
                                <Stepper
                                    style={{    
                                        '--border-inner': 'none',
                                        '--button-background-color': '#F8F9FA',
                                        '--height': '1.5rem',
                                        '--active-border': '1px solid #1677ff',
                                    }}
                                    min={0}
                                    value={this.props.goodsData.count}
                                    onChange={value => {

                                        this.props.setCount(this.props.goodsData.listIndex,this.props.goodsData.foodsIndex,value)
                                    }}
                                />
                            }
                        </div>
                    </div>
                </div>
                <div className="desc">
                    <div className="title">商品介绍</div>
                    <div className="content">
                        {this.props.goodsData.info}
                    </div>
                </div>
                {/* 这块没样式标注 只能随便写了  */}
                <div className="rates">
                    <div className="rate-control">
                        {
                            this.props.goodsData.ratings?
                            <div className="rate-select">
                                <div className={`block block-like ${this.state.selectType == -1?'block-checked':''}`}  onClick={()=>{this.changeType(-1)}}><span className="text">全部</span><span className="count">{this.props.goodsData.ratings.length}</span></div>
                                <div className={`block block-like ${this.state.selectType == 0?'block-checked':''}`} onClick={()=>{this.changeType(0)}}><span className="text">满意</span><span className="count">{this.props.goodsData.ratings.filter(el=>el.rateType == 0).length}</span></div>
                                <div className={`block block-unlike ${this.state.selectType == 1?'block-checked':''}`} onClick={()=>{this.changeType(1)}}><span className="text">不满意</span><span className="count">{this.props.goodsData.ratings.filter(el=>el.rateType == 1).length}</span></div>
                            </div>
                            :''
                        }
                        <div className="rate-alltext"> 
                            <CheckCircleTwoTone className="icon" onClick={(e)=>{this.onlyShowContent(e,true)}} twoToneColor={this.state.onlyContent?'#52c41a':'#E9EBEC'} />
                            只显示有内容的评价
                        </div>
                    </div>
                </div>
                <div className="rate-list">
                    {this.filterRatings().map((el,index)=>{
                        return(
                            <div className="rate-list-item" key={index}>
                                
                                <div className="rate-info">
                                    <div className="head">
                                        <span className="time">{dateFormat(new Date(el.rateTime),'yyyy-MM-dd hh:mm')}</span>
                                        <span className="name">
                                            <span>{el.username}</span>    
                                            <div className="headimage">
                                                <img
                                                    className="img-f"
                                                    src={el.avatar}
                                                />
                                            </div>
                                        </span> 
                                    </div>
                                    <div className="rate-desc">
                                        {
                                            el.rateType?
                                            <span className="down icon-thumb_down"></span>:
                                            <span className="up icon-thumb_up"></span>
                                        }
                                        {el.text}
                                    </div>
                                    {/* <div className="good-foods">
                                        <span className="up icon-thumb_up"></span>
                                        <div className="good-block-list">
                                            {
                                                el.recommend.map((el,index)=>{
                                                    return (
                                                        <div className="good-block-item" key={index}>{el}</div>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div> */}
                                </div>
                            </div>
                        )
                    })}
                </div>
                <style>
                    {/* 这里的样式主要是给底部的购物车。。不然购物车盖不到详情页上面 */}
                    {
                        `.shopping-cart{
                            z-index: 301
                        }`
                    }
                </style>
            </div>
         );
    }
}
 
export default FoodsDetail;